<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      display: inline-block;
      /* width: 100%;
      height: 100%; */
      width: 400px;
      height: 400px;
      /* position: absolute;
      left: 100px;
      top: 100px; */
    }
  </style>
  <script src="../dist/ddd.js"></script>
  <video id='ss' src="assets/vedio.mp4" hidden -autoplay></video>
  <img hidden id="ss1" src="assets/texture.png" alt="">
</head>

<body>
  <canvas id="my_Canvas"></canvas>
  <script>
    // function imagesLoaded(images) {

    /*============= Creating a canvas =================*/
    var mycanvas = document.getElementById('my_Canvas');
    var client = new DDD.UICanvas(mycanvas)
    var camera = new DDD.UICamera();
    var render = new DDD.UIRender(client, camera);

    var colorMaterial = new DDD.UIMaterial({});
    var mapMaterial = new DDD.UITextureMaterial({
      image: ss1,
    });

    var obj = new DDD.Plane();
    // obj._material = colorMaterial;
    obj._material = new DDD.UITextureMaterial({
      dynamic: true,
      image: ss,
    });
    obj.scaling(0.2, 0.2, 1.0);
    obj.setPosition(-.8, .8, 0)
    render.addRenderObject(obj);


    var center = new DDD.Shape(1, 1, .1, .1, "_cener_");
    center._material = colorMaterial;
    center.add(obj);
    // render.addRenderObject(center)


    var box = new DDD.Box();
    box.scaling(0.2, 0.2, 0.2)
    box.rotateX(0.25)
    box.rotateY(0.25)
    box.setPosition(.8, .8, 0)
    box._material = new DDD.UIMaterial({});
    render.addRenderObject(box);

    var cubeMap = new DDD.UIShaderMaterial({});
    var box5 = new DDD.Box();
    box5._material = cubeMap
    box5.scaling(0.2, 0.2, 0.2);
    box5.rotateX(0.25);
    box5.rotateY(0.25);
    box5.setPosition(-.8, -.8, 0)

    new DDD.ImagesLoaded([
      'assets/texture.png',
      'assets/texture.png',
      'assets/texture.png',
      'assets/texture.png',
      'assets/texture.png',
      'assets/texture.png',
    ]).onLoad((images) => {
      console.log('--++++', images, box5.name)

      cubeMap.config['u_Sampler'] = DDD.GLTools.createCubeTexture(client.gl, images, {});
      render.addRenderObject(box5);
    })

    var box2 = new DDD.Box();
    box2.scaling(0.2, 0.2, 0.2);
    box2.rotateX(0.25);
    box2.rotateY(0.25);
    box2.setPosition(-.8, 0, 0)
    box2._material = new DDD.UICubeTextureMaterial({
      images: [
        'assets/xneg.png',
        'assets/xneg.jpg',
        'assets/xpos.jpg',
        'assets/ypos.jpg',
        'assets/zneg.jpg',
        'assets/zpos.jpg',
      ],
      // u_Sampler: images, //[ss, ss1, ss, ss, ss, ss],
    });
    render.addRenderObject(box2);

    var box3 = new DDD.Box('--n');
    box3.scaling(0.2, 0.2, 0.2);
    box3.rotateX(0.25);
    box3.rotateY(0.25);
    box3.setPosition(0, -.8, 0)
    box3._material = mapMaterial;
    render.addRenderObject(box3);

    var ball = new DDD.Ball();
    ball.scaling(0.2, 0.2, 0.2)
    ball.setPosition(.8, -.8, 0)
    ball._material = colorMaterial;
    render.addRenderObject(ball);


    var obj1 = new DDD.Plane();
    obj1._material = new DDD.UIMultiTexturesMaterial({
      texture0: ss1,
      texture1: ss1,
    });
    obj1.scaling(0.5, 0.5, 1.0);
    render.addRenderObject(obj1);

    var animation = new DDD.Animation(true)
    animation._duration = 2000;
    animation._repeatCount = 4;
    animation._startOffset = 1000;
    animation._repeatMode = 'reverse'
    // animation._fillBefore = false;
    // animation._fillAfter = true;
    animation.applyTransformation = (interpolatedTime) => {
      // console.log('...', interpolatedTime * 2 - 1, interpolatedTime * 2 - 1)
      obj.setPosition(interpolatedTime * 2 - 1, interpolatedTime * 2 - 1, 0)

    }

    animation.registerAnimationStartListener((ani) => {
      // console.log('start...')
    }).registerAnimationEndListener((ani) => {
      // console.log('end...', ani._oneMoreTime, ani._started, ani._ended, ani._more)
    }).registerAnimationRepeatListener((ani) => {
      // console.log('repeat...', ani._repeated)
    }).registerAnimationProgressListener((ani, progress) => {
      // console.log('animation', progress)
    })

    let ani = new DDD.ValueAnimation();
    ani.valueFrom = 2;
    ani.valueTo = 52;
    ani._duration = 2000;
    ani._startOffset = 2000;
    // ani._repeatCount = 200;
    ani._fillEnabled = true;
    ani._fillBefore = false;
    ani._fillAfter = false;
    ani.setInterpolator(new DDD.BounceInterpolator());
    ani
      .registerAnimationStartListener((ani) => {
        // console.log('start...')
      }).registerAnimationProgressListener((ani, progress) => {
        // console.log('value animation', progress * 2 - 1.0, ani.getValue() * 2.0 / 52.0 - 1, 0)
        var pointer = new DDD.Ball();
        pointer.scaling(0.01, 0.01, 0.01)
        pointer._material = colorMaterial;
        pointer.setPosition(progress * 2 - 1.0, ani.getValue() * 2.0 / 52.0 - 1, 0)
        render.addRenderObject(pointer)
      });
    ani.start()

    var animate = function (time) {
      render.render();
      obj.rotateZ(-0.01)
      box.rotateZ(-0.01)
      box2.rotateZ(-0.01)
      ball.rotateZ(-0.01)
      // center.rotateZ(-0.1)
      animation.updateAnimation();
      ani.updateAnimation();
      window.requestAnimationFrame(animate);
    }
    animate(0);

    mycanvas.addEventListener('webgl', (e) => {
      // console.log(e.webglX, e.webglY, e.webgldrag)
      if (e.webgldrag) {}
    })
    // }
  </script>

</body>

</html>